<!-- 必须全局拥有唯一的id -->
<div id="templateSubscribe">
  <!-- 搜索栏 -->
  <yu-panel :title="$t('subscribe.xxdy')" :hide-filter="false">
    <template slot="filter">
      <yu-xform v-model="formdata" related-table-name="templateSubscribeTable" form-type="search">
        <yu-xform-group :column="4">
          <yu-xform-item :label="$t('subscribe.xxlx')" :placeholder="$t('subscribe.xxlx')" ctype="input"
            name="messageType"></yu-xform-item>
          <yu-xform-item :label="$t('subscribe.ms')" :placeholder="$t('subscribe.ms')" ctype="input" name="messageDesc">
          </yu-xform-item>
        </yu-xform-group>
      </yu-xform>
    </template>
    <!-- 工具栏 -->
    <template slot="right">
      <yu-toolBar>
        <el-button @click="userSubscribe()">{{ $t('subscribe.xxdy') }}</el-button>
      </yu-toolBar>
    </template>
    <!-- 表格 -->
    <el-table-x ref="templateSubscribeTable" :max-height="height" :data-url="urls.dataUrl"
      :table-columns="tableColumns">
    </el-table-x>
  </yu-panel>
  <el-dialog :title="$t('subscribe.xxdy')" :visible.sync="dialogVisible">
    <el-tag type="success">{{ $t('subscribe.qdlx') }}</el-tag>
    <el-radio v-for="item in channelTypes" v-model="channelType" :label="item">{{channelTypeMap[item]}}</el-radio>
    <el-tabs v-model="activeFlag" @tab-click="handleClick" style="margin-top: 11px;">
      <el-tab-pane :label="$t('subscribe.yhdy')" name="first">
        <el-table-x ref="userTable" :max-height="mainGridFirst.height" :default-load="false" :pageable="false"
          :checkbox="mainGridFirst.checkbox" :data-url="mainGridFirst.dataUrl"
          :table-columns="mainGridFirst.tableColumns"></el-table-x>
        <div align="center">
          <el-button type="primary" @click="saveUserSubscribe()">{{ $t('subscribe.bcyh') }}</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('subscribe.gwdy')" name="second">
        <el-table-x ref="dutyTable" :max-height="mainGridPost.height" :default-load="false" :pageable="false"
          :checkbox="mainGridPost.checkbox" :data-url="mainGridPost.dataUrl" :table-columns="mainGridPost.tableColumns">
        </el-table-x>
        <div align="center" style="margin-top: 24px;">
          <el-button type="primary" @click="saveDutySubscribe()">{{ $t('subscribe.bcgw') }}</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('subscribe.jsdy')" name="third">
        <el-table-x ref="roleTable" :max-height="mainGridRole.height" :default-load="false" :pageable="false"
          :checkbox="mainGridRole.checkbox" :data-url="mainGridRole.dataUrl" :table-columns="mainGridRole.tableColumns">
        </el-table-x>
        <div align="center" style="margin-top: 24px;">
          <el-button type="primary" @click="saveRoleSubscribe()">{{ $t('subscribe.bcjs') }}</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('subscribe.jgdy')" name="fourth">
        <el-tree-x ref="orgUsertree" :show-checkbox="true" :height="mainGridPost.height" style="margin-top: 10px"
          :data-url="orgUrl" data-id="orgId" data-label="orgName" :data-params="param" data-pid="upOrgId"
          :data-root="orgRootId" :check-strictly="true"></el-tree-x>
        <div align="center" style="margin-top: 24px;">
          <el-button type="primary" @click="saveOrgSubscribe()">{{ $t('subscribe.bcjg') }}</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('subscribe.gxdy')" name="fifth">
        <el-form ref="form" :model="mainGridFifth" label-width="180px">
          <el-form-item :label="$t('subscribe.xdfsrydgx')">
            <el-select v-model="mainGridFifth.Relationship" clearable>
              <el-option :label="$t('subscribe.tjjgry')" value="sameevel"></el-option>
              <el-option :label="$t('subscribe.sjjgry')" value="uplevel"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div align="center" style="margin-top: 24px;">
          <el-button type="primary" @click="saveRelationshipSubscribe()">{{ $t('subscribe.bcgx') }}</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</div>